<template>
  <view class="detail-container">
    <Navigation />
    <view class="detail-content" v-if="newsItem">
      <text class="title">{{ newsItem.title }}</text>
      <text class="summary">{{ newsItem.summary }}</text>
    </view>
  </view>
</template>

<script>
import Navigation from '../../components/Navigation.vue';


export default {
  components: {
    Navigation
  },
  data() {
    return {
      newsItem: null
    };
  },
  onLoad(options) {
    this.fetchNewsItem(options.id);
  },
  methods: {
    fetchNewsItem(id) {
      const newsData = [
        { id: 1, title: '新闻标题1', summary: '这是新闻1的详细内容' },
        { id: 2, title: '新闻标题2', summary: '这是新闻2的详细内容' },
        { id: 3, title: '新闻标题3', summary: '这是新闻3的详细内容' },
        { id: 4, title: '新闻标题4', summary: '这是新闻4的详细内容' },
        { id: 5, title: '新闻标题5', summary: '这是新闻5的详细内容' },
      ];
      this.newsItem = newsData.find(item => item.id === parseInt(id));
    }
  }
}
</script>

<style scoped>
.detail-container {
  padding: 20px;
}
.detail-content {
  margin-top: 10px;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}
.summary {
  font-size: 16px;
  color: #666;
}
</style>